<template>
  <el-dialog
    :visible="dialogVisible"
    :show-close="true"
    :before-close="handleClose"
    :close="handleClose"
    :class="{'mobile-dialog':showMobilePage}"
    class="small-common-dialog-size operator-dialog"
  >
    <Title title="各平台询价字段" style="margin-bottom:16px" font-size="16px" tips="需增加或修改平台字段内容请联系研发部"/>
    <template v-if="fieldsList && fieldsList.length">
      <div class="container">
        <div v-for="(item, index) in fieldsList" :key="index" class="field-wrap">
          <div class="platform-name">{{ item.platformName }}</div>
          <div v-for="(field, idx) in item.fields" :key="field.id" class="item">
            {{ (idx + 1) + '、' + field.name }}
          </div>
        </div>
      </div>
    </template>
    <EmptyPlaceholder
      v-else
      :empty-img="emptyImg"
      :empty-text-top="4"
      text-color="#999"
      text="暂无询价字段,如需配置请联系研发部"
      image-size="120px"
      style="margin-top: 24px"
    />
  </el-dialog>
</template>
<script>
import { getFieldList } from '@/api/flyPrice';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import { mapState } from 'vuex';
import emptyImg from '@/assets/indexEmpty.png';

export default {
  components: { Title, EmptyPlaceholder },
  data() {
    return {
      emptyImg,
      fieldsList: [],
      dialogVisible: false,
      loading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.getFieldList();
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getFieldList() {
      getFieldList().then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.fieldsList = res.data || [];
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.operator-dialog{
  &::v-deep {
    .el-dialog {
      width: 300px !important;
    }
    .el-dialog__body{
      overflow: scroll;
      overflow-y: auto;
      padding: 16px 24px 24px !important;
    }
  }
  .center{
    display: flex;
    justify-content: center;
  }
}
.container {
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  padding-left: 10px;
  .field-wrap {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 16px;
    .platform-name {
      margin-bottom: 6px;
      color: #333333;
    }
    .item {
      font-size: 12px;
      color: #999999;
      margin-bottom: 4px;
    }
  }
}
.mobile-dialog {
  &::v-deep {
    .el-dialog{
      width: 100% !important;
    }
  }
}
</style>
